<template>
<div>
    <el-form :inline="true" :model="foodName" class="demo-form-inline">
    <el-form-item label="菜品名称">
      <el-input v-model="foodName" placeholder="菜品名称" clearable />
      <el-button type="primary" @click="getPage">搜索</el-button>
    </el-form-item>
  </el-form>
  <br/>
  <el-table :data="foodList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="foodName" label="菜品名称"  />
      <el-table-column  label="菜品图片"  >
        <template #default="scope">
          <img :src="scope.row.foodImg" width="50" height="50" />
        </template>
      </el-table-column>
      <el-table-column prop="foodPrice" label="菜品价格"  />
      <el-table-column prop="categoryName" label="菜品分类"  />
      <el-table-column prop="stock" label="库存数量"  />
      <el-table-column prop="status" label="菜品状态"  />
      <el-table-column prop="foodExplain" label="菜品介绍"  />
      <el-table-column  label="操作" >

        <template #default="scope">
            <el-button
            size="small"
            type="default" 
            @click="edit(scope.row)"
          >
          修改
          </el-button>
          <el-button
            size="small"
            :type="scope.row.status == 0 ? 'primary' : 'danger'" 
            @click="changeStatus(scope.row)"
          >
          {{ scope.row.status == 0 ? '上架' : '下架' }}
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-divider />
    <br/>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>


    <el-dialog v-model="dialogFormVisible" :title="dTitle" width="500">
    <el-form :model="food">
      <el-form-item label="foodName" >
        <el-input v-model="food.foodName" autocomplete="off" />
      </el-form-item>
      <p>菜品图片</p>
      <el-upload
            
            class="avatar-uploader"
            action="http://localhost:7444/common/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="food.foodImg"  :src="food.foodImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
      <p>菜品分类</p>
      <el-select
      v-model="food.categoryId"
      placeholder="选择菜品分类"
      style="width: 240px"
    >
    <el-option
        v-for="item in categoryList"
        :key="item.categoryId"
        :label="item.categoryName"
        :value="item.categoryId"
      />
        </el-select>
        <br>

    <el-form-item label="foodPrice" >
        <el-input-number v-model="food.foodPrice"/>
      </el-form-item>
      <el-form-item label="stock" >
        <el-input-number v-model="food.stock" :min="1" :max="100"/>
      </el-form-item>
      <el-form-item label="foodExplain" >
        <el-input v-model="food.foodExplain" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive,ref } from 'vue';
import { ElMessage ,ElMessageBox} from 'element-plus';
import { onBeforeMount } from 'vue';
import apiFood from '../../api/Food/Food';
import apiFoodCategory from '../../api/Food/FoodCategory';
const foodName = ref('');
const foodList = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const dialogFormVisible = ref(false);
const food=reactive({});
const dTitle=ref('');
const categoryList=ref([]);
const business=JSON.parse(sessionStorage.getItem('businessData'));
const getPage=()=>{
    const param={
      foodName:foodName.value,
      pageNum:currentPage.value,
      pageSize:pageSize.value,
      shopId:business.id
    }
    console.log(param);
    apiFood.pageSelectFood(param)
    .then(response=>{
      foodList.value=response.data.list;
      total.value=response.data.totalCount;
    })
    .catch(error=>{
      console.log(error);
    })
}
const onSubmit=()=>{
    apiFood.editFood(food)
  .then(response=>{
    ElMessage({
      message: '修改成功',
      type: 'success',
    });
    dialogFormVisible.value=false;
    getPage();
  })
  
}
const handleSizeChange=(val)=>{
  pageSize.value=val;
  getPage();
}
const handleCurrentChange=(val)=>{
  currentPage.value=val;
  getPage();
}
const edit=(row)=>{
    const data={
      shopId:row.shopId,
      pageSize:100000,
      pageNum:1
    }
    apiFoodCategory.pageSelectFoodCategory(data)
    .then(response=>{
      categoryList.value=response.data.list;
    })
  dialogFormVisible.value=true;
  console.log(row);
  dTitle.value="修改菜品信息";
  food.foodName=row.foodName;
  food.foodImg=row.foodImg;
  food.foodPrice=row.foodPrice;
  food.foodExplain=row.foodExplain;
  food.stock=row.stock;
  food.status=row.status;
  food.categoryId=row.categoryId;
  food.categoryName=row.categoryName;
 food.foodId=row.foodId;
}
const changeStatus=(row)=>{
    const param={
      foodId:row.foodId,
      status:row.status==0?1:0
    }
    apiFood.changeFoodStatus(param)
    .then(response=>{
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
      getPage();
    })
    .catch(error=>{
      console.log(error);
    })
}
onBeforeMount(()=>{
  getPage();
})
</script>

<style lang="scss" scoped>

</style>